import React, { PureComponent, Component } from 'react'; // 这行必须写，不然报错，可能是eslint搞事情。
import { connect } from 'dva'; // connect用于组件连接models层数据
import {
  Upload,
  Button,
  Col,
  Form,
  Input,
  message,
  Modal,
  Row,
  Tree,
} from 'antd';
const { Dragger } = Upload;
import {
  InboxOutlined,
  DownloadOutlined,
  VerticalAlignTopOutlined,
} from '@ant-design/icons';
import { getToken } from '@/utils/auth';

import { importTemplate, exportUser } from '@/api/system/user';

class UserDragger extends PureComponent {
  state = {
    visible: false,
    excelVisible: false,
    confirmLoading: false,
    params: {},
    onReset: () => {},
  };

  handleImport = () => {
    this.setState({
      excelVisible: true,
    });
  };

  handleExcelImport = () =>
    this.setState({
      excelVisible: false,
    });

  handleExcelCancel = () =>
    this.setState({
      excelVisible: false,
    });

  onUpload = info => {
    const { status } = info.file;
    if (status !== 'uploading') {
      window.console.log(info.file.response.code);
    }
    if (status === 'done') {
      if (info.file.response.code == 500) {
        message.error(`${info.file.response.msg}`);
      } else if (info.file.response.code == 200) {
        message.success(`${info.file.name} 数据导入成功!`);
        this.handleExcelCancel();
        this.onClickReset();
      }
    } else if (status === 'error') {
      message.error(`${info.file.response.msg}`);
    }
  };
  handleTemplate = () => {
    importTemplate().then(res => {
      window.open(
        'http://192.168.0.110:8080/common/download?fileName=' +
          encodeURI(res.msg) +
          '&delete=' +
          true,
      );
    });
  };
  onClickReset = () => {
    const { onReset } = this.state;
    onReset();
  };

  //导出函数
  handleExport = () => {
    const { queryParams } = this.props;
    const { params } = this.state;
    Modal.confirm({
      title: '用户导出确认',
      content: '是否导出用户数据?',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        exportUser(queryParams).then(res => {
          if (res.code == 200) {
            window.open(
              window.open(
                'http://192.168.0.110:8080/common/download?fileName=' +
                  encodeURI(res.msg) +
                  '&delete=' +
                  true,
              ),
            );
            message.success(`${res.msg} 导出成功!`);
          }
        });
      },
      onCancel() {},
    });
  };

  render() {
    const { excelVisible, confirmLoading } = this.state;

    const uploadProps = {
      name: 'file',
      headers: { Authorization: 'Bearer ' + getToken() },
      action: 'http://192.168.0.110:8080/system/user/importData',
    };
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };

    return (
      <>
        <Col span={1.5}>
          <Button
            icon={<DownloadOutlined />}
            style={{ background: '#13ce66', color: '#ffffff' }}
            onClick={this.handleImport}
          >
            导入
          </Button>
        </Col>
        <Col span={1.5}>
          <Button
            icon={<VerticalAlignTopOutlined />}
            style={{ background: '#ffba00', color: '#ffffff' }}
            onClick={this.handleExport}
          >
            导出
          </Button>
        </Col>

        <Modal
          title="用户数据导入"
          width={500}
          visible={excelVisible}
          confirmLoading={confirmLoading}
          onOk={this.handleExcelImport}
          onCancel={this.handleExcelCancel}
          okText="确认"
          cancelText="取消"
        >
          <Form style={{ marginTop: 8 }} hideRequiredMark>
            <Form.Item {...formItemLayout} label="模板上传">
              <Dragger {...uploadProps} onChange={this.onUpload}>
                <p className="ant-upload-drag-icon">
                  <InboxOutlined />
                </p>
                <p className="ant-upload-text">将文件拖到此处，或点击上传</p>
                <p className="ant-upload-hint">请上传 .xls,.xlsx 格式的文件</p>
              </Dragger>
            </Form.Item>
            <Form.Item {...formItemLayout} label="模板下载">
              <Button
                type="primary"
                icon={<DownloadOutlined />}
                size="small"
                onClick={this.handleTemplate}
              >
                点击下载
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  }
}

export default UserDragger;
